<template>
    <div>

        <!--地址信息-->
        <div>
            <el-row>
                <el-radio-group v-model="radio">
                    <el-radio border v-for="(item, index) in addressList" :key="index" :label="item.id">
                        <span>收件人姓名：{{ item.name }}</span>
                        <span>收件人电话：{{ item.phone }}</span>
                        <span>收件人地址：{{ item.address }}</span>
                    </el-radio>
                </el-radio-group>
                <el-button type="text" @click="dialogFormVisible = true">添加收件人信息</el-button>
            </el-row>
        </div>


        <!--支付方式-->
        <div>支付方式</div>


        <!--商品信息-->
        <div>商品信息</div>


        <!--优惠、发票-->
        <div>优惠、发票</div>


        <!--按钮-->
        <div>按钮</div>



        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                
                <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="城市" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="详细地址" :label-width="formLabelWidth">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addAddress">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogFormVisible: false,
            form: {
                name: '',
                phone:'',
                address:''
            },
            formLabelWidth: '120px',
            radio: 0,
            addressList: [
                { id: 1, name: '梁才根', phone: '18012345678', address: '上海市奉贤区澳洲镇58号456弄501室', isDefault: '0' },
                { id: 2, name: 'Max', phone: '18000000000', address: '广东市奉贤区澳洲镇58号456弄501室', isDefault: '0' },
                { id: 3, name: 'ToMax', phone: '18011111111', address: '北京市奉贤区澳洲镇58号456弄501室', isDefault: '1' }
            ]
        };
    },
    methods: {
        //加载收件人地址信息
        onLoadAddress() {

            this.radio = this.addressList.find(x => x.isDefault == '1').id

        },
        //加载选中的商品信息
        onLoadSelectedGoods() { },
        //添加收件人信息
        addAddress(){
            this.addressList.push(
                {id:4,name:this.form.name,isDefault:'0'}
            )
            this.dialogFormVisible = false
        },
    },
    mounted() {
        this.onLoadAddress()
        this.onLoadSelectedGoods()
    }
}
</script>
